<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>老虎机</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .bj {
        margin: 0 auto;
        width: 640px;
        margin-top: 30px;
        height: 200px;
        background-color: red;
        position: relative;
        margin-bottom: 0;
        overflow: hidden;
        border-radius: 30px;
        border: 2px solid gold;
    }
    
    .bj_box {
        height: 600px;
        width: 200px;
        padding-left: 10px;
        padding-right: 10px;
        position: absolute;
        top: 0;
    }
    
    .bb2 {
        position: absolute;
        left: 210px;
        top: 0;
    }
    
    .bb3 {
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .bj_box img {
        height: 200px;
        width: 200px;
        display: block;
    }
    
    button {
        position: absolute;
        font-size: 30px;
        top: 280px;
        left: 50%;
        cursor: pointer;
        margin-left: -62px;
    }
    
    p {
        font-size: 30px;
        position: absolute;
        top: 330px;
        left: 50%;
        display: none;
        margin-left: -255px;
    }
</style>

<body>
    <div class="bj">
        <div class="bj_box bb1">
            <img src="1.jpg">
            <!--<img src="2.jpg">
            <img src="3.jpg">-->
        </div>

        <div class="bj_box bb2">
            <img src="1.jpg">
            <!--<img src="2.jpg">
            <img src="3.jpg">-->
        </div>
        <div class="bj_box bb3">
            <img src="1.jpg">
            <!--<img src="2.jpg">
            <img src="3.jpg">-->
        </div>
    </div>
    <button>抽奖开始</button>
    <p>奖励《英语五年高考十年模拟训练题》一套</p>
    <script>
        var btn = document.querySelector("button");
        var img1 = document.querySelector(".bb1 img");
        var img2 = document.querySelector(".bb2 img");
        var img3 = document.querySelector(".bb3 img");
        var timer1 = null;
        var timer2 = null;
        var timer3 = null;
        var timer4 = null;
        btn.addEventListener("click", function(e) {
            var imageName = img1.src;
            var arr = imageName.split(".");
            var indexArr = arr[arr.length - 2].split("/");
            var index = indexArr[indexArr.length - 1];
            timer1 = setInterval(function() {
                var time = Math.floor(Math.random() * 10);
                if (time > 0) {
                    time = time - 1;
                    index = Number(index) + 1;
                    if (index > 3) {
                        index = 1;
                    }
                    img1.src = index + ".jpg";
                } else {
                    clearInterval(timer1);
                }

            }, 200);

        })


        btn.addEventListener("click", function(e) {
            var imageName = img2.src;
            var arr = imageName.split(".");
            var indexArr = arr[arr.length - 2].split("/");
            var index = indexArr[indexArr.length - 1];
            timer2 = setInterval(function() {
                var time = Math.floor(Math.random() * 10);
                if (time > 0) {
                    time = time - 1;
                    index = Number(index) + 1;
                    if (index > 3) {
                        index = 1;
                    }
                    img2.src = index + ".jpg";
                } else {
                    clearInterval(timer2);
                }

            }, 200);

        })

        btn.addEventListener("click", function(e) {
            var imageName = img3.src;
            var arr = imageName.split(".");
            var indexArr = arr[arr.length - 2].split("/");
            var index = indexArr[indexArr.length - 1];
            timer3 = setInterval(function() {
                var time = Math.floor(Math.random() * 10);
                if (time > 0) {
                    time = time - 1;
                    index = Number(index) + 1;
                    if (index > 3) {
                        index = 1;
                    }
                    img3.src = index + ".jpg";
                } else {
                    clearInterval(timer3);
                }

            }, 200);

        })


        var p = document.querySelector("p");

        btn.addEventListener("click", function(e) {
            // img1.src == img2.src && img2.src === img3.src
            if (img1.src == img2.src === img2.src === img3.src) {
                p.style.display = "block";
            }
        })
    </script>
</body>

</html>